import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

import { quillEditor } from 'vue-quill-editor'

export default {
  components: {
    quillEditor
  },
  data () {
    return {
      // 高亮 => 步骤条
      active: 1,
      // 高亮 => 标签页
      activeName: 'one',
      // 表单对象
      addGoodsForm: {
        goods_name: '', // 商品名称	不能为空
        goods_cat: [], // 以为','分割的分类列表	不能为空
        goods_price: '', // 价格	不能为空
        goods_number: '', // 数量	不能为空
        goods_weight: '', // 重量	不能为空
        goods_introduce: '', // 介绍	可以为空
        pics: [], // 上传的图片临时路径（对象）	可以为空
        attrs: '',
        // 是否促销
        isPromotion: true
      },
      defaultProps: {
        label: 'cat_name',
        value: 'cat_id'
      },
      options: [],
      // 关于图片上传的一些属性
      dialogImageUrl: '',
      dialogVisible: false,
      // 上传图片的请求头
      headers: {
        Authorization: localStorage.getItem('token')
      },
      // 富文本的设置
      editorOption: {
        placeholder: '请输入您的小秘密'
      },
      // v-html 内容
      htmlStr: '<h1 class="red">我是h1</h1>'
    }
  },
  created () {
    this.loadCatList()
  },
  methods: {
    /**
     * 点击tabs
     */
    clickTabs (e) {
      // console.log(+e.index+1)
      this.active = +e.index + 1
    },
    /**
     * 下一步
     */
    next (activeName, active) {
      console.log('点击下一步:', activeName, active)
      this.activeName = activeName
      this.active = active
    },
    /**
     * 请求分类
     */
    async loadCatList () {
      let res = await this.$axios.get('categories', {
        params: {
          type: 3
        }
      })
      console.log(res)
      this.options = res.data.data
    },
    /**
     * 关于图片的两个事件
     */
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    handlePictureCardPreview (file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    // 上传图片的回调
    updoadSuccess (res) {
      console.log(res)

      this.addGoodsForm.pics.push({
        pic: res.data.tmp_path
      })
    }
  }
}
